<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>计算属性</title>
</head>
<body>
<div id="app"></div>
<script type="module">
    // computed, watch, watchEffect -> 基于 effect

    /**
     * 计算属性的特点
     * 1） 不访问这个属性就不计算
     * 2） 计算属性得有同步的返回值，不能异步
     * 3） 如果依赖的值不变也不重新计算
     * 4） 计算属性不能修改本身的值，可以去修改其它属性
     * 5） 可以在模板中使用
     */
    import {computed, reactive, effect} from "../js/reactivity/index.js";
    //   import {
    //     computed,
    //     reactive,
    //     effect,
    //   } from "https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.runtime.esm-browser.prod.js";

    const state = reactive({
        firstName: "j",
        lastName: "w",
        age: 30,
    });
    const fullName = computed({
        get: () => {
            console.log("computed");
            return state.firstName + state.lastName;
        },
        set: (val) => {
            console.log(val);
        },
    });

    // 计算属性也是一个effect， 依赖的状态会收集计算属性的 effect
    // 计算属性会触发它收集的 effect

    effect(() => {
        // 计算属性也可以收集effect
        console.log("计算属性也可以收集effect");
        // 多次获取计算属性，依赖属性未发生变化，只计算一次（this._dirty的作用）
        console.log(fullName.value);
        console.log(fullName.value);
        console.log(fullName.value);
        console.log(fullName.value);
    });

    // fullName.value;
    // fullName.value;

    setTimeout(() => {
        state.firstName = "x";
    }, 1000);

    const obj = reactive({foo: 1, bar: 2})
    const sumRes = computed(() => obj.foo + obj.bar)
    console.log(sumRes.value)
</script>
</body>
</html>
